<template>
  <div class="addLeave-warp">
    <a-form ref="formRef" :model="state.form">
      <a-form-item label="管理的班级" v-if="state.treeData.lenght === 0">
        暂无可管理的班级
      </a-form-item>
      <a-form-item label="管理的班级" v-else>
        <a-tree
          v-model:checkedKeys="state.checkedKey"
          checkable
          @check="onCheck"
          :tree-data="state.treeData"
          style="max-height: 270px; overflow-y: auto"
        >
        </a-tree>
      </a-form-item>
      <a-form-item
        name="time"
        label="请假时间"
        :rules="[{ required: true, message: '请选择请假时间' }]"
      >
        <a-range-picker
          style="width: 100%; margin-top: 4px"
          :show-time="{ format: 'HH:mm' }"
          format="YYYY-MM-DD HH:mm"
          size="large"
          :placeholder="['选择开始时间', '选择结束时间']"
          :value="hackValue || value"
          :disabled-date="disabledDate"
          @change="onChange"
          @calendarChange="onCalendarChange"
        />
      </a-form-item>
      <a-form-item
        label="情况说明"
        name="reason"
        :rules="[{ required: true, message: '请说明详细情况' }]"
      >
        <a-textarea
          v-model:value="state.form.reason"
          placeholder="请说明详细情况"
          :rows="4"
        />
      </a-form-item>
    </a-form>
    <a-button type="primary" block @click="confirm(formRef)">提交</a-button>
  </div>
</template>

<script lang="ts" setup>
import moment from "moment";
import { ref, reactive, onMounted, watch } from "vue";
import { message } from "ant-design-vue";
import { useRouter, useRoute } from "vue-router";
import { useTeacherOrgList, useTeacherWhiteCreate } from "@/api";
import { setKeyTitle, formatTree } from "@/utils/treeMethod";
import { Dayjs } from "dayjs";
const router = useRouter();
const route = useRoute();
const formRef = ref();
type RangeValue = [Dayjs, Dayjs];
const dates = ref<RangeValue>();
const value = ref<RangeValue>();
const hackValue = ref<RangeValue>();
const useContent = () => {
  return {
    orgCodeList: [] as any,
    reason: "",
    startTime: "",
    endTime: "",
    time: [],
  };
};

const state = reactive({
  form: useContent(),
  params: {
    operatorCode: route.query.code,
  },
  treeData: [] as any,
  halfCheckedKeys: [],
  checkedKey: [],
});

const onCheck = (checkedKeys, e) => {
  console.log(checkedKeys, e);
  state.checkedKey = checkedKeys;
  state.form.orgCodeList = [...checkedKeys, ...e.halfCheckedKeys];
};
const disabledDate = (current: Dayjs) => {
  if (!dates.value || (dates.value as any).length === 0) {
    return false;
  }
  const tooLate = dates.value[0] && current.diff(dates.value[0], "days") > 1;
  const tooEarly = dates.value[1] && dates.value[1].diff(current, "days") > 1;
  return tooEarly || tooLate;
};

const onCalendarChange = (val: RangeValue) => {
  dates.value = val;
};
const getTreeData = async () => {
  let res = await useTeacherOrgList(state.params);
  res.result = res.result || [];
  let tres = setKeyTitle(res.result);
  let tree = formatTree(tres, "");
  state.treeData = tree;
};
const onChange = (val: Moment[], dateString: string[]) => {
  value.value = val;
  state.form.startTime = dateString[0] !== "" ? dateString[0] + ":00" : "";
  state.form.endTime = dateString[1] !== "" ? dateString[1] + ":00" : "";
  state.form.time = [state.form.startTime, state.form.endTime];
};

const confirm = (formRef: any) => {
  if (!formRef) return;
  formRef.validate().then(async () => {
    console.log(state.form);
    let res = await useTeacherWhiteCreate({ ...state.form, ...state.params });

    if (res.success) {
      message.success("操作成功", 2);
    } else {
      message.error("操作失败，请稍后再试！", 2);
    }
    setTimeout(() => {
      router.push({ name: "WhiteRecord" });
      state.form = useContent();
    }, 2300);
  });
};

onMounted(() => {
  document.title = "操作";
  getTreeData();
});
</script>
<style scoped lang="less">
.addLeave-warp {
  padding: 20px;
  // background-color: #f5f5f5;
  :deep(.ant-form-item) {
    margin-bottom: 12px !important;
  }
}
</style>
